<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>地址管理</title>

		<link href="./AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="./AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="./css/personal.css" rel="stylesheet" type="text/css">
		<link href="./css/addstyle.css" rel="stylesheet" type="text/css">
		<script src="./AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="./AmazeUI-2.4.2/assets/js/amazeui.js"></script>

		<script src="js/plugins/vue/dist/vue.js"></script>
		<script src="js/plugins/axios/dist/axios.js"></script>
		<!--全局配置，以后只要用vue+axios的页面都引入common.js-->
		<script src="js/common.js"></script>

		<!--导入css-->
		<link rel="stylesheet" href="./city_pikers/css/bootstrap.css">
		<link rel="stylesheet" href="./city_pikers/css/city-picker.css">
		<link rel="stylesheet" href="./city_pikers/css/main.css">
		<!--导入city_piker的js-->
		<script src="./city_pikers/js/jquery.js"></script>
		<script src="./city_pikers/js/bootstrap.js"></script>
		<script src="./city_pikers/js/city-picker.data.js"></script>
		<script src="./city_pikers/js/city-picker.js"></script>
		<script src="./city_pikers/js/main.js"></script>
		<!--引入百度地图js-->
		<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=f4saEYVelrckZC4eLqBziGqtPhiXwXsp"></script>
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd">
									<a href="#" target="_top" class="h">亲，请登录</a>
									<a href="#" target="_top">免费注册</a>
								</div>
							</div>
						</ul>
						<ul class="message-r">
							<div class="topMessage home">
								<div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
							</div>
							<div class="topMessage my-shangcheng">
								<div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
							</div>
							<div class="topMessage mini-cart">
								<div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
							</div>
							<div class="topMessage favorite">
								<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
						</ul>
						</div>

						<!--悬浮搜索框-->

						<div class="nav white">
							<div class="logoBig">
								<li><img src="./images/logobig.png" /></li>
							</div>

							<div class="search-bar pr">
								<a name="index_none_header_sysc" href="#"></a>
								<form>
									<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
								</form>
							</div>
						</div>

						<div class="clear"></div>
					</div>
			</article>
		</header>

		<div class="nav-table">
			<div class="long-title"><span class="all-goods">全部分类</span></div>
			<div class="nav-cont">
				<ul>
					<li class="index"><a href="#">首页</a></li>
					<li class="qc"><a href="#">闪购</a></li>
					<li class="qc"><a href="#">限时抢</a></li>
					<li class="qc"><a href="#">团购</a></li>
					<li class="qc last"><a href="#">大包装</a></li>
				</ul>
				<div class="nav-extra">
					<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
					<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
				</div>
			</div>
		</div>
		<b class="line"></b>

		<div class="center" id="personAddress">
			<div class="col-main">
				<div class="main-wrap" >

					<div class="user-address" >
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
						</div>
						<hr/>
						<ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails" >


							<li class="user-addresslist" v-for="addr in userAddresses">
								<!--<span class="new-option-r"><i class="am-icon-check-circle"></i>设为默认</span>-->
								<p class="new-tit new-p-re">
									<span class="new-txt">{{addr.contacts}}</span>
									<span class="new-txt-rd2">{{addr.phone}}</span>
								</p>
								<div class="new-mu_l2a new-p-re">
									<p class="new-mu_l2cw">
										<span class="title">地址：</span>
										<span class="province">{{addr.areaCode.split('/')[0]}}</span>
										<span class="city">{{addr.areaCode.split('/')[1]}}</span>
										<span class="dist">{{addr.areaCode.split('/')[2]}}</span>
										<span class="street">{{addr.address}}</span></p>
								</div>
								<div class="new-addr-btn">
									<a :href="urlPrefix+addr.id"><i class="am-icon-edit"></i>编辑</a>
									<span class="new-addr-bar">|</span>
									<a href="javascript:void(0);" @click="delClick(addr.id);"><i class="am-icon-trash"></i>删除</a>
								</div>
							</li>
						</ul>
						<div class="clear"></div>
						<a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
						<!--例子-->
						<div class="am-modal am-modal-no-btn" id="doc-modal-1">

							<div class="add-dress">

								<!--标题 -->
								<div class="am-cf am-padding">
									<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
								</div>
								<hr/>

								<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
									<form class="am-form am-form-horizontal">

										<div class="am-form-group">
											<label for="user-name" class="am-form-label">收货人</label>
											<div class="am-form-content">
												<input type="text" v-model="userAddress.contacts" id="user-name" placeholder="收货人">
											</div>
										</div>

										<div class="am-form-group">
											<label for="user-phone" class="am-form-label">手机号码</label>
											<div class="am-form-content">
												<input id="user-phone" v-model="userAddress.phone" placeholder="手机号必填" type="email">
											</div>
										</div>
										<div class="am-form-group">
											<label for="city-picker1" class="am-form-label">所在地</label>
											<div class="am-form-content address">
												<div style="position: relative;"><!-- container -->
													<input id="city-picker1" readonly  type="text"  style="width:50%;">
												</div>
										</div>
										</div>

										<div class="am-form-group">
											<label for="user-address" class="am-form-label">详细地址</label>
											<div class="am-form-content">
												<input id="user-address" v-model="userAddress.address" placeholder="输入详细地址" type="email">
											</div>
										</div>
										<div class="am-form-group">
											<label for="user-address" class="am-form-label">全地址</label>
											<div class="am-form-content">
												<input type="text" id="suggestId" placeholder="请输入地址">
											</div>
										</div>

										<div class="am-form-group">
											<div class="am-u-sm-9 am-u-sm-push-3">
												<a @click="saveAddress" class="am-btn am-btn-danger">保存</a>
												<a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
											</div>
										</div>
									</form>
								</div>

							</div>

						</div>

					</div>


					<div class="clear"></div>

				</div>
				<!--底部-->
				<div class="footer">
					<div class="footer-hd">
						<p>
							<a href="#">恒望科技</a>
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							<a href="#">关于恒望</a>
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025 Hengwang.com 版权所有. 更多模板 <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
						</p>
					</div>
				</div>
			</div>

			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="index.html"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<li class="person">
						<p><i class="am-icon-newspaper-o"></i>个人资料</p>
						<ul>
							<li> <a href="information.html">个人信息</a></li>
							<li> <a href="safety.html">安全设置</a></li>
							<li> <a href="address.html">地址管理</a></li>
							<li> <a href="cardlist.html">快捷支付</a></li>
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-balance-scale"></i>我的交易</p>
						<ul>
							<li><a href="order.html">订单管理</a></li>
							<li> <a href="change.html">退款售后</a></li>
							<li> <a href="comment.html">评价商品</a></li>
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-dollar"></i>我的资产</p>
						<ul>
							<li> <a href="points.html">我的积分</a></li>
							<li> <a href="coupon.html">优惠券 </a></li>
							<li> <a href="bonus.html">红包</a></li>
							<li> <a href="walletlist.html">账户余额</a></li>
							<li> <a href="bill.html">账单明细</a></li>
						</ul>
					</li>

					<li class="person">
						<p><i class="am-icon-tags"></i>我的收藏</p>
						<ul>
							<li> <a href="collection.html">收藏</a></li>
							<li> <a href="foot.html">足迹</a></li>														
						</ul>
					</li>

					<li class="person">
						<p><i class="am-icon-qq"></i>在线客服</p>
						<ul>
							<li> <a href="consultation.html">商品咨询</a></li>
							<li> <a href="suggest.html">意见反馈</a></li>							
							
							<li> <a href="news.html">我的消息</a></li>
						</ul>
					</li>
				</ul>

			</aside>
		</div>
	</body>
	<script type="text/javascript">
        $(document).ready(function() {
            $(".new-option-r").click(function() {
                $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
            });

            var $ww = $(window).width();
            if($ww>640) {
                $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
            }

        })
	</script>
	<script type="text/javascript">
        var vue = new Vue({
            el:"#personAddress",
            data:{
                urlPrefix:"addUserAddress.html?userAddressId=",
                userAddresses:[],
                userAddress: {
                    id:null,
                    contacts: '',
                    areaCode: '',
                    address: '',
                    fullAddress: '',
                    phone: '',
                    phoneBack: '',
                    tel: '',
                    postCode: '',
                    email: '',
                    user_id:null
                }
            },
            methods : {
                saveAddress(){//新增
                    this.$http.post("/userAddress/saveAddress",this.userAddress)
                        .then(result=>{
                            //发布成功后就跳转到主页
                            result = result.data;
                            if(result.success){
                                alert("保存成功！");
                                location.reload();//页面并刷新
                            }else{
                                alert(result.message);
                            }
                        })
                },
                delClick(addressId){//删除地址
                    this.$http.delete("/userAddress/delete/"+addressId)
                        .then(result => {
                            alert("删除成功！！");
                            location.reload();
                        })
                },
                getUserAddress(){
                    this.$http.post("/userAddress")
                        .then(result => {
                            this.userAddresses = result.data;
                            console.log(this.userAddresses);
                        })
                }
            },
            mounted(){
                this.getUserAddress();
            }
        });
    </script>

	<!--city_piker-->
	<script>
        $(function () {
            $(document).on('click', 'div.district a', function () {
                vue.userAddress.areaCode = $('#city-picker1').val();//选择的全部内容
            });
        });
	</script>
	<!--百度地图api-->
	<script type="text/javascript">
        // 百度地图API功能
        function G(id) {
            return document.getElementById(id);
        }

        var map = new BMap.Map("l-map");
        //map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。

        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "suggestId"
                ,"location" : map
            });

        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            alert(myValue);
            //直接赋值给vue的模型层中的address
            // 通过外部引用的方式赋值
            vue.userAddress.fullAddress = myValue;

            setPlace();
        });

        function setPlace(){
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
	</script>

</html>